<script setup>

</script>

<template>
  <div id="mainTitle" class="bg">
    <div dv-bg>
      <!--        头部-->
      <div class="module-box" style="padding:10px 5px;margin-bottom: 30px">
        <dv-decoration2 :reverse="true" style="width:5px;height:100px;transform: rotateX(180deg)"/>
        <!--            左边-->
        <div style="flex: 0 1 30%;height: 5px">
          <div small-bg>
            <dv-decoration-10 style="height:5px;"/>
            <!--            按钮-->
            <el-row style="margin-top: 40px;">
              <el-col :span="6">
                <dv-button :bg="false" @click="console.log('click')">智慧城市</dv-button>
              </el-col>
              <el-col :span="6">
                <dv-button :bg="false" @click="console.log('click')">智慧城市</dv-button>
              </el-col>
              <el-col :span="6">
                <dv-button :bg="false" @click="console.log('click')">智慧城市</dv-button>
              </el-col>
              <el-col :span="6">
                <dv-button :bg="false" @click="console.log('click')">智慧城市</dv-button>
              </el-col>
            </el-row>
          </div>
        </div>

        <!--            中间-->
        <div style="flex: 0 1 40%;height:55px">
          <div class="module-box">
            <!--              左边花纹-->
            <div small-bg>
              <dv-decoration8 style="width:115px;height:45px;flex:0 1 30%"/>
            </div>

            <!--              中间标题-->
            <div small-bg>
              <div style="position: relative;">
                <div
                    style="position: absolute; top: 0;color: white; font-size:20px;margin-top:20px;left: 50%; transform: translateX(-50%);">
                  矛盾纠纷分析
                </div>
                <dv-decoration5 :dur="2" style="width:400px;height:110px;flex:0 1 40%"/>
              </div>
            </div>


            <!--              右边花纹-->
            <div small-bg>
              <dv-decoration8 :reverse="true" style="width:115px;height:45px;flex:0 1 30%"/>
            </div>
          </div>

        </div>


        <!--            右边-->
        <div style="flex: 0 1 30%;">
          <div small-bg>
            <dv-decoration-10 style="height:5px;transform: rotateY(180deg)"/>
            <!--            按钮-->
            <el-row style="margin-top: 40px;">
              <el-col :span="6">
                <dv-button :bg="false" @click="console.log('click')">智慧城市</dv-button>
              </el-col>
              <el-col :span="6">
                <dv-button :bg="false" @click="console.log('click')">智慧城市</dv-button>
              </el-col>
              <el-col :span="6">
                <dv-button :bg="false" @click="console.log('click')">智慧城市</dv-button>
              </el-col>
              <el-col :span="6">
                <dv-button :bg="false" @click="console.log('click')">智慧城市</dv-button>
              </el-col>
            </el-row>
          </div>
        </div>

        <dv-decoration2 :reverse="true" style="width:5px;height:100px;"/>
      </div>
    </div>


  </div>
</template>

<style scoped>
.bg {
  background: url('../assets/img/pageBg.png') no-repeat center center;
  background-size: cover;
  height: 15vh;
  width: 100%;
  padding-top: 3px;
}
</style>